<template>
  <div class="settings">
    <div class="settings-header">
      <h2>系统设置</h2>
      <p>管理智能家居系统的各项配置</p>
    </div>
    
    <div class="settings-content">
      <el-row :gutter="20">
        <!-- 系统信息 -->
        <el-col :span="12">
          <el-card class="settings-card">
            <template #header>
              <div class="card-header">
                <el-icon><InfoFilled /></el-icon>
                <span>系统信息</span>
              </div>
            </template>
            
            <div class="info-item">
              <label>系统版本</label>
              <span>v1.0.0</span>
            </div>
            
            <div class="info-item">
              <label>运行时间</label>
              <span>{{ systemUptime }}</span>
            </div>
            
            <div class="info-item">
              <label>设备总数</label>
              <span>{{ devices.length }} 个</span>
            </div>
            
            <div class="info-item">
              <label>运行中设备</label>
              <span>{{ activeDevicesCount }} 个</span>
            </div>
          </el-card>
        </el-col>
        
        <!-- 快捷设置 -->
        <el-col :span="12">
          <el-card class="settings-card">
            <template #header>
              <div class="card-header">
                <el-icon><Setting /></el-icon>
                <span>快捷设置</span>
              </div>
            </template>
            
            <div class="setting-item">
              <label>自动保存设置</label>
              <el-switch v-model="settings.autoSave" />
            </div>
            
            <div class="setting-item">
              <label>声音提醒</label>
              <el-switch v-model="settings.soundAlert" />
            </div>
            
            <div class="setting-item">
              <label>夜间模式</label>
              <el-switch v-model="settings.nightMode" />
            </div>
            
            <div class="setting-item">
              <label>自动场景切换</label>
              <el-switch v-model="settings.autoScene" />
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 数据管理 -->
      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <el-icon><DataBoard /></el-icon>
            <span>数据管理</span>
          </div>
        </template>
        
        <div class="data-actions">
          <el-button type="primary" @click="exportData">
            <el-icon><Download /></el-icon>
            导出数据
          </el-button>
          
          <el-button type="warning" @click="importData">
            <el-icon><Upload /></el-icon>
            导入数据
          </el-button>
          
          <el-button type="danger" @click="clearAllData">
            <el-icon><Delete /></el-icon>
            清空所有数据
          </el-button>
        </div>
      </el-card>
      
      <!-- 关于系统 -->
      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <el-icon><QuestionFilled /></el-icon>
            <span>关于系统</span>
          </div>
        </template>
        
        <div class="about-content">
          <div class="about-item">
            <h4>智能家居控制中心模拟系统</h4>
            <p>这是一个基于Vue3开发的智能家居控制中心模拟系统，用于毕业设计演示。</p>
          </div>
          
          <div class="about-item">
            <h4>主要功能</h4>
            <ul>
              <li>设备管理：添加、删除、控制各种智能设备</li>
              <li>场景模式：支持在家、离家、睡眠、聚会等场景</li>
              <li>可视化控制：直观的设备状态显示和控制界面</li>
              <li>响应式设计：支持桌面和移动设备</li>
            </ul>
          </div>
          
          <div class="about-item">
            <h4>技术栈</h4>
            <el-tag type="primary">Vue 3</el-tag>
            <el-tag type="success">Element Plus</el-tag>
            <el-tag type="info">JavaScript</el-tag>
            <el-tag type="warning">CSS3</el-tag>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
/* eslint-disable no-unused-vars */
import { 
  InfoFilled, 
  Setting, 
  DataBoard, 
  Download, 
  Upload, 
  Delete, 
  QuestionFilled 
} from '@element-plus/icons-vue'
/* eslint-enable no-unused-vars */
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDeviceStore } from '../store/deviceStore.js'

export default {
  name: 'SystemSettings',
  setup() {
    const deviceStore = useDeviceStore()
    
    const settings = ref({
      autoSave: true,
      soundAlert: true,
      nightMode: false,
      autoScene: false
    })
    
    const systemUptime = ref('00:00:00')
    
    const devices = computed(() => deviceStore.devices.value)
    const activeDevicesCount = computed(() => deviceStore.activeDevicesCount.value)
    
    // 模拟系统运行时间
    onMounted(() => {
      const startTime = Date.now()
      setInterval(() => {
        const now = Date.now()
        const diff = now - startTime
        const hours = Math.floor(diff / (1000 * 60 * 60))
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
        const seconds = Math.floor((diff % (1000 * 60)) / 1000)
        systemUptime.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
      }, 1000)
    })
    
    const exportData = () => {
      const data = {
        devices: devices.value,
        settings: settings.value,
        exportTime: new Date().toISOString()
      }
      
      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `smart-home-data-${new Date().toISOString().split('T')[0]}.json`
      a.click()
      URL.revokeObjectURL(url)
      
      ElMessage.success('数据导出成功')
    }
    
    const importData = () => {
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = '.json'
      input.onchange = (e) => {
        const file = e.target.files[0]
        if (file) {
          const reader = new FileReader()
          reader.onload = (e) => {
            try {
              const data = JSON.parse(e.target.result)
              if (data.devices) {
                // 这里可以实现数据导入逻辑
                ElMessage.success('数据导入成功')
              } else {
                ElMessage.error('无效的数据文件')
              }
            } catch (error) {
              ElMessage.error('文件解析失败')
            }
          }
          reader.readAsText(file)
        }
      }
      input.click()
    }
    
    const clearAllData = () => {
      ElMessageBox.confirm(
        '此操作将清空所有设备数据，是否继续？',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        // 这里可以实现清空数据逻辑
        ElMessage.success('数据已清空')
      }).catch(() => {
        ElMessage.info('已取消操作')
      })
    }
    
    return {
      settings,
      systemUptime,
      devices,
      activeDevicesCount,
      exportData,
      importData,
      clearAllData
    }
  }
}
</script>

<style scoped>
.settings {
  padding: 20px;
}

.settings-header {
  margin-bottom: 30px;
}

.settings-header h2 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 28px;
  font-weight: 600;
}

.settings-header p {
  margin: 0;
  color: #666;
  font-size: 16px;
}

.settings-content {
  max-width: 1200px;
}

.settings-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #333;
}

.info-item,
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child,
.setting-item:last-child {
  border-bottom: none;
}

.info-item label,
.setting-item label {
  font-weight: 500;
  color: #333;
}

.info-item span {
  color: #666;
}

.data-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.about-content {
  line-height: 1.6;
}

.about-item {
  margin-bottom: 25px;
}

.about-item:last-child {
  margin-bottom: 0;
}

.about-item h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.about-item p {
  margin: 0 0 10px 0;
  color: #666;
}

.about-item ul {
  margin: 10px 0;
  padding-left: 20px;
}

.about-item li {
  margin-bottom: 5px;
  color: #666;
}

.about-item .el-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .settings {
    padding: 15px;
  }
  
  .data-actions {
    flex-direction: column;
  }
  
  .data-actions .el-button {
    width: 100%;
  }
}
</style>
